<style scoped>
  tbody .table-namespace-col:hover {
    font-size: 1.2em;
  }
</style>
<template>
  <div class="type-table-con">
    <Table :columns="columns" :data="data" :loading="loading"></Table>

    <!-- 编辑 -->
    <Modal v-model="updateTypeModal.show" width="360" :mask-closable="false">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>编辑模块信息</span>
      </p>

      <div>
        <Form :model="updateTypeModal.form" label-position="top">
          <FormItem label="项目类型编号">
            <Input v-model="updateTypeModal.form.id" disabled/>
          </FormItem>
          <FormItem label="项目类型名称">
            <Input v-model="updateTypeModal.form.name"/>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="updateTypeModal.loading" @click="handleUpdateType(updateTypeModal.form)"
                long>
          <span v-if="!updateTypeModal.loading">更新模块</span>
          <span v-else>更新请求提交中</span>
        </Button>
      </div>
    </Modal>

    <!-- 删除 -->
    <Modal v-model="removeTypeModal.show" width="360">

      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>确认删除模块</span>
      </p>

      <div style="text-align:center">
        <p>此操作将会导致相关模块及功能<b style="padding:0 5px;color: red;">不可用</b>，请确认是否删除？</p>
      </div>

      <div slot="footer">
        <Button type="text" @click="removeTypeModal.show=false">取消</Button>
        <Button type="error" :loading="removeTypeModal.loading" @click="handleRemoveType(removeTypeModal.type)">
          <span v-if="!removeTypeModal.loading">确认删除</span>
          <span v-else>正在删除</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "ProjectsTypeTable",
    props: ['data', 'loading'],
    data() {
      return {
        // 表格列配置
        columns: [
          {
            title: '编号',
            key: 'id',
            width: 100,
            align: 'center'
          },
          {
            title: '名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '添加时间',
            key: 'createdDate',
            align: 'center'
          },
          {
            title: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.updateType(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeType(params.row)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],

        // 更新模块模态框
        updateTypeModal: {
          show: false,
          form: {
            id: 0,
            name: ''
          },
          loading: false
        },

        // 模块删除模态框
        removeTypeModal: {
          show: false,
          type: {},
          loading: false
        }
      }
    },
    methods: {
      // 更新模块
      updateType(type) {
        let updateTypeModal = this.updateTypeModal;

        let keys = Object.keys(updateTypeModal.form);
        keys.forEach(key => {
          updateTypeModal.form[key] = type[key];
        })
        updateTypeModal.form.alias = type.alias
        updateTypeModal.show = true;
      },
      handleUpdateType(typeForm) {
        let updateTypeModal = this.updateTypeModal;
        updateTypeModal.loading = true;
        this.$emit('on-update-type', typeForm, (status) => {
          if (status) {
            updateTypeModal.show = false;
            Object.assign(this.$data.updateTypeModal.form, this.$options.data().updateTypeModal.form)
          }
          updateTypeModal.loading = false;
        })
      },

      // 删除项目类型
      removeType(type) {
        let removeTypeModal = this.removeTypeModal;
        removeTypeModal.show = true;
        removeTypeModal.type = type;
      },
      handleRemoveType(type) {
        let removeTypeModal = this.removeTypeModal;
        removeTypeModal.loading = true;
        this.$emit('on-remove-type', type, (status) => {
          if (status) {
            removeTypeModal.show = false
            removeTypeModal.type = {}
          }
          removeTypeModal.loading = false
        })
      }
    }
  }
</script>


